import { getToken } from '@/utils/storage'
import { Message } from 'element-ui'
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/login')
    },
    {
      path: '/',
      component: () => import('@/views/layout'),
      redirect: '/dashboard',
      children: [
        {
          path: '/dashboard',
          // 💕 路由懒加载,只有当路由被访问的时候才会加载对应的组件,从而提高首屏加载速度
          // 路由懒加载的语法: () => import('组件路径')
          // 路由懒加载的好处: 1. 提高首屏加载速度 2. 减少首页体积
          // 路由懒加载的缺点: 1. 不利于SEO 2. 不利于代码分割
          // 路由懒加载的注意事项: 1. 路由懒加载的组件必须是异步组件 2. 路由懒加载的组件必须是Vue组件
          // 因为登录页面使用的是index.vue,所以写路径的时候可以省略index.vue
          component: () => import('@/views/dashboard')
        },
        {
          path: '/article',
          component: () => import('@/views/article')
        }
      ]
    }

  ]
})
const whiteList = ['/login']
router.beforeEach((to, from, next) => {
  // 使用排除法,思考哪些情况下是允许放行的
  // 两种情况,一种是去白名单里的页面,一种是有token
  if (whiteList.includes(to.path) || getToken()) return next()
  next('/login')
  // 提示用户
  Message.error('请先登录')
})

export default router
